import React, { useState } from 'react'
import { EyeOutlined } from '@ant-design/icons'

const PagingList: React.FC = () => {
    const [dataArr, setDataArr] = useState(false)
    const [dataNum, setDataNum] = useState(1)
    const [dataft, setDataft] = useState(false)
    const [imgsList, setImgsList] = useState([
        {
            imgall: [
                {
                    imgs: "https://pub-cdn-oss.chuangkit.com/designTemplate/2022/10/31/8fa394b7-d998-4526-ba81-b57e3091ccf3_thumb_gif?v=1717893286000&imageMogr2%2Fthumbnail%2F400x%3E%2Fformat%2Fgif/cgif/35"
                },
                {
                    imgs: "https://pub-cdn-oss.chuangkit.com/designTemplate/2022/09/22/ae1ded0e-1319-4b10-994c-b7aed51dbccb_thumb_gif?v=1717934900000&imageMogr2%2Fthumbnail%2F400x%3E%2Fformat%2Fgif/cgif/35"
                },
                {
                    imgs: "https://pub-cdn-oss.chuangkit.com/designTemplate/2024/04/24/2758c1b6-cc0d-4c8e-9d1c-5e8234836197_thumb?v=1713937680000&imageMogr2%2Fthumbnail%2F400x%3E%2Fformat%2Fwebp%2Fsharpen%2F70"
                },
                {
                    imgs: "https://pub-cdn-oss.chuangkit.com/designTemplate/2024/08/21/001f6f46-886d-44c3-a73d-bf5bcb549665_thumb?v=1724225520000&imageMogr2%2Fthumbnail%2F400x%3E%2Fformat%2Fwebp%2Fsharpen%2F70"
                },
                {
                    imgs: "https://pub-cdn-oss.chuangkit.com/designTemplate/2024/09/20/8af90c6d-508a-4852-8f6d-d66c34f176e9_thumb?v=1726816561000&imageMogr2%2Fthumbnail%2F400x%3E%2Fformat%2Fwebp%2Fsharpen%2F70"
                },
                {
                    imgs: "https://pub-cdn-oss.chuangkit.com/designTemplate/2024/06/17/647afb86-7a0e-4afd-9c6e-109ebaba14c4_thumb?v=1718554200000&imageMogr2%2Fthumbnail%2F400x%3E%2Fformat%2Fwebp%2Fsharpen%2F70"
                },
                {
                    imgs: "https://pub-cdn-oss.chuangkit.com/designTemplate/2023/10/26/07dd2d89-06ec-4901-be9e-54f675cd0a38_thumb?v=1717977264000&imageMogr2%2Fthumbnail%2F400x%3E%2Fformat%2Fwebp%2Fsharpen%2F70"
                },
                {
                    imgs: "https://pub-cdn-oss.chuangkit.com/designTemplate/2023/06/26/14296413-fee4-407d-b6a4-da947256ff83_thumb?v=1717981359000&imageMogr2%2Fthumbnail%2F400x%3E%2Fformat%2Fwebp%2Fsharpen%2F70"
                },
                {
                    imgs: "https://pub-cdn-oss.chuangkit.com/designTemplate/2023/07/12/81ffba0e-038e-42c4-9303-ffb9bb5b4dae_thumb?v=1689211201000&imageMogr2%2Fthumbnail%2F400x%3E%2Fformat%2Fwebp%2Fsharpen%2F70"
                },
                {
                    imgs: "https://pub-cdn-oss.chuangkit.com/designTemplate/2022/11/18/44b69a33-32fd-4bc4-a9e3-58c57f4d63b6_thumb_gif?v=1717909211000&imageMogr2%2Fthumbnail%2F400x%3E%2Fformat%2Fgif/cgif/35"
                },

            ]
        }
    ])
    const handelMouseEnter = (event: any) => {
        setDataft(true)
        const { clientX, target } = event
        const { left, right } = target.getBoundingClientRect() // getBoundingClientRect是一个 DOM 方法，用于获取元素的大小和位置
        const width = right - left;
        const offset = ((clientX - left) / width) * imgsList[0].imgall.length

        const newIndex = Math.floor(offset)
        if (newIndex >= 0 && newIndex < imgsList[0].imgall.length) {
            setDataNum(newIndex)
        }
    }
    const handelMouseLeave = () => {
        setDataft(false)
        setDataNum(0)
    }
    return (
        <div className='paging-Box' onMouseEnter={() => { setDataArr(true) }} onMouseLeave={() => { setDataArr(false) }}>
            <div className="paging-Top">
                {
                    imgsList && imgsList.map((item, index) => {
                        return <div key={index} className='paging-Top-Item' onMouseMove={handelMouseEnter} onMouseLeave={handelMouseLeave}>
                            <img style={{ width: '200px', height: '300px', transition: 'opacity 2s ease' }} src={item.imgall[dataNum].imgs} alt="slider" />
                            {
                                dataft ? <div className='paging-bott' style={{ display: 'flex', flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', paddingLeft: '10px', paddingRight: '10px' }}>
                                    <p style={{ width: '40px', background: '#666560', borderRadius: '5px', color: '#fff', paddingLeft: ' 5px' }}> {dataNum + 1}/{item.imgall.length}</p>
                                    <span style={{ color: '#999999' }}><EyeOutlined />600</span>
                                </div>
                                    : <h4 className='paging-bott' style={{ whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis', paddingLeft: '10px', paddingTop: '10px' }}>招聘美食研究所</h4>
                            }
                        </div>
                    })
                }
            </div>
            <div className="paging-Bottom">
                {
                    dataArr ? <p style={{width: '100%', height: '30px', display: 'flex', paddingLeft: '10px', marginTop: '15px', flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center' }}>
                        <h4 style={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>下午茶</h4>
                    </p> : ''
                }
            </div>
        </div>
    )
}

export default PagingList